<template>
  <div>
    <div class="main-contianer manage">
      <div class="main-left">
        <div class="left-title flex-row">
          <span class="title-text">{{ loginInfo.resourceLessonName }}</span>
          <span class="change-text" @click="showSelectCourseBox()">更换课程</span>
        </div>
        <ul class="left-list">
          <li class="item flex-row" v-for="(item, index) of list" :key="index">
            <span class="item-title">{{item.title}}</span>
            <span class="item-content">{{item.content}}</span>
          </li>
        </ul>
      </div>
      <div class="main-right">
        <div class="right-top flex-row">
          <img src="~@/assets/images/gl_bjgl@2x.png" @click="goUrl('/teacher/manage/class-manage')" />
          <img src="~@/assets/images/gl_kcsz@2x.png" @click="goUrl('/teacher/manage/course-setting')" />
          <img src="~@/assets/images/gl_algl@2x.png" @click="goUrl('/teacher/manage/case-manage')" />
          <img src="~@/assets/images/gl_zygl@2x.png" @click="goUrl('/teacher/manage/resourse-manage')" />
        </div>
        <div class="right-bottom">
          <div class="left-title flex-row">
            <span class="title-text">我的资源</span>
            <span class="change-text" @click="goUrl('/teacher/manage/resourse-manage')">查看更多</span>
          </div>
          <div class="tabel">
            <InsTable :table-head="tableHead" :table-data="tableData">
              <!-- 自定义列 类型 -->
              <el-table-column slot="resourceType" slot-scope="headScope"  align="center" :label="headScope.head.label">
                <template slot-scope="scope">
                  {{ scope.row.resourceType == '1' ? '文件' : scope.row.resourceType == '2' ? '测验': scope.row.resourceType == '3' ? '问卷' : '' }}
                </template>
              </el-table-column>
              <!-- 自定义列 操作 -->
              <el-table-column slot="opera" slot-scope="headScope"  fixed="right" align="center" :label="headScope.head.label">
                <template slot-scope="scope">
                  <el-button type="text" title="删除" @click="remove(scope.row)"><i class="el-icon-delete" /></el-button>
                </template>
              </el-table-column>
            </InsTable>
          </div>
        </div>
      </div>
    </div>
    <SelectCourseBox ref="SelectCourseBox" @changeCourse="changeCourse" />
  </div>
</template>

<script>
import InsTable from '@/components/InsTable'
import SelectCourseBox from '@/components/SelectCourseBox'
import {
  lessonResource
} from '@/api/teacher/manage/index'
import { mapGetters } from 'vuex'
import {
  myResource,
  deleteResource
} from '@/api/teacher/manage/resource'

export default {
  name: 'course',
  data () {
    return {
      tableHead: [
        {
          label: '资源标题', prop: 'resourceName', width: 200
        }, {
          label: '类型', prop: 'resourceType', isSlot: true
        }, {
          label: '上传时间', prop: 'createdTime', width: 200
        }, {
          label: '大小', prop: 'fileSize'
        }, {
          label: '操作', prop: 'opera', isSlot: true
        }
      ],
      tableData: [],
      list: []
    }
  },
  components: {
    InsTable,
    SelectCourseBox
  },
  computed: {
    ...mapGetters([
      'loginInfo'
    ])
  },
  mounted () {
    this.lessonResource()
    this.myResource()
  },
  methods: {
    async lessonResource () {
      const res = await lessonResource()
      if (res.code === '200') {
        this.list = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async myResource () {
      const res = await myResource({
        toDate: '',
        keyword: '',
        fromDate: ''
      })
      if (res.code === '200') {
        this.tableData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    goUrl (url) {
      this.$router.push(url)
    },
    remove (row) {
      this.$confirm(`确定删除资源 - ${row.resourceName}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteResource({
          resourceId: row.id
        })
        if (res.code === '200') {
          this.$message.success('删除成功')
          this.myResource()
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    showSelectCourseBox () {
      this.$refs.SelectCourseBox.changeShow(true)
    },
    changeCourse (data) {
      this.lessonResource()
    }
  }
}
</script>

<style scoped lang="scss">
.manage {
  .left-title {
    .title-text {
      font-size: 22px;
      font-weight: bold;
      color: rgba(16, 29, 55, 1);
    }
    .change-text {
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 156, 246, 1);
      cursor: pointer;
    }
  }
  .main-left {
    width: 452px;
    float: left;
    height: 605px;
    background: #ffffff;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;

    .left-list {
      margin: 30px 0;
      .item {
        padding: 0 20px;
        width: 415px;
        height: 44px;
        box-sizing: border-box;
        background: rgba(245, 245, 246, 1);
        margin-bottom: 10px;
        .item-title {
          font-size: 16px;
          font-weight: 500;
          color: rgba(16, 29, 55, 1);
        }
        .item-content {
          font-size: 14px;
          font-weight: 500;
          color: rgba(16, 29, 55, 1);
          opacity: 0.6;
        }
      }
    }
  }
  .main-right {
    float: right;
    .right-top {
      width: 728px;
      height: 168px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      justify-content: flex-start;
      img {
        width: 120px;
        height: 116px;
        margin-left: 20px;
        cursor: pointer;
      }
    }
    .right-bottom {
      width: 728px;
      height: 418px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      padding: 20px;
      box-sizing: border-box;
      margin-top: 15px;
      .tabel {
        margin-top: 20px;
      }
    }
  }
}
</style>
